<template>
	<view class="cardListBox">
		<view class="ticketList">
			<view class="ticketItem" :style="{ 'backgroundImage': 'url(' + ticket_bg + ')' }">
				<view class="left">
					<view v-if="ticketsItem.couponTypeStr == '折扣券'">{{ ticketsItem.couponAmount || "0" }}折</view>
					<view v-else>￥{{ ticketsItem.couponAmount || "-" }}</view>
					<view>{{ ticketsItem.applyStationType =='1'?'所有站点':ticketsItem.applyStationType =='2'?'指定站点':'指定条件' }}</view>
				</view>
				<view class="right">
					<view>
						<!-- ticketsItem.type == 1?"服务费券":ticketsItem.type == 2?"电费券":"现金券" -->
						<view style="font-size: 34rpx;font-weight: 500;">{{ ticketsItem.couponTypeStr }}</view>
						<!-- <view style="font-size: 26rpx;display: flex;"
							v-if="ticketsItem.marketCouponOptionStations&&ticketsItem.marketCouponOptionStations.length != 0">适用站点
							<u-icon name="arrow-right" color="#606266" size="25"></u-icon>
						</view> -->
					</view>
					<view>满￥{{ ticketsItem.meetAmount || '-'  }}可用</view>
					<view>
						<view>
							<view>始</view>
							<view> {{ ticketsItem.receiveTime || '-'  }}</view>
						</view>
						<view>
							<view>止</view>
							<view>{{ ticketsItem.expireTime || '-'  }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="details">
			<view>
				<view>
					<image :src="iconKaquanlaiyuan_icon"></image>
					<view>来源</view>
				</view>
				<!-- <view>
					{{sourceList[ticketsItem.activityType-1]?sourceList[ticketsItem.activityType-1]+'/':''}}{{ticketsItem.source}}
				</view> -->
				<view>
					{{ sourceOptions.find((item) => item.value == ticketsItem.activityType).label || '-' }}
					/
					{{ ticketsItem.source }}
				</view>
			</view>
			<view>
				<view>
					<image :src="iconKaquanlaiyuan_icon"></image>
					<view>优惠券码</view>
				</view>
				<view>{{ ticketsItem.number || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconShijian_icon"></image>
					<view>领取时间</view>
				</view>
				<view>{{ ticketsItem.receiveTime || '-' }}</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"></image>
					<view>适用站点</view>
				</view>
				<view v-if="ticketsItem.applyStationType == 1">
					所有站点
				</view>
				<view v-if="ticketsItem.applyStationType == 2">
					<view>
						{{ ticketsItem.useStationAddress }}
					</view>
				</view>
			</view>
			<view>
				<view>
					<image :src="iconZhandian_icon"></image>
					<view>使用说明</view>
				</view>
				<view>
					{{ticketsItem.remark}}
				</view>
			</view>
		</view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
	</view>
</template>

<script>
	import {
		getMyCouponPage
	} from "@/api/https";
	import {
		couponDetails
	} from "@/api/marketing/coupon";
	const app = getApp();
	export default {
		data() {
			return {
				// 1 => 充值奖励活动, 2 => 累计活动, 3 => 单笔消费 4 => 站点优惠活动,
				// 5 => 邀请奖励, 6 => 新客有利, 7 => 多人拼团
				// 8 =>卡劵赠送活动 9=>券码兑换活动 10 =>首充有礼活动 11 =>拼团
				// 12 成长会员  13 付费会员 
				// 15 邀新升级 、16 拉新消费 、17 首月消费
				sourceOptions: [
					{
						label: '充值奖励活动',
						value: 1
					},
					{
						label: '累计活动',
						value: 2
					},
					{
						label: '单笔消费',
						value: 3
					},
					{
						label: '站点优惠活动',
						value: 4
					},
					{
						label: '邀请奖励',
						value: 5
					},
					{
						label: '新客有礼',
						value: 6
					},
					{
						label: '多人拼团',
						value: 7
					},
					{
						label: '卡劵赠送活动',
						value: 8
					},
					{
						label: '券码兑换活动',
						value: 9
					},
					{
						label: '首充有礼活动',
						value: 10
					},
					{
						label: '拼团',
						value: 11
					},
					{
						label: '成长会员',
						value: 12
					},
					{
						label: '付费会员',
						value: 13
					},
					{
						label: '--',
						value: 14
					},
					{
						label: '邀新升级',
						value: 15
					},
					{
						label: '拉新消费',
						value: 16
					},
					{
						label: '首月消费',
						value: 17
					},
					{
						label: '积分商场',
						value: 21
					},
				],

				sourceList: ['充值奖励活动', '累计消费活动', '单笔折扣活动', '站点优惠活动', '邀请奖励', '新客有礼', '多人拼团', '卡券赠送活动', '券码兑换活动', '首充有礼活动',
					'单笔消费活动'
				],
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				ticket_bg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/line_bg.png`,
				iconKaquanlaiyuan_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconKaquanlaiyuan.png`,
				iconShijian_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconShijian.png`,
				iconZhandian_icon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/iconZhandian.png`,
				ticketsItem: {},
			};
		},
		onLoad(options) {
			if (options) {
				this.couponDetails(options.id);
			}
		},
		methods: {
			setTabName(row) {
				console.log(row)
				this.tabIndex = row.tabCode;
			},
			couponDetails(id) {
				couponDetails(id).then((res) => {
					if (res.code == 200) {
						this.ticketsItem = res.data || {};
						if (res.data.marketCouponOptionStations.length) {
							let useStationAddress = ''
							res.data.marketCouponOptionStations.forEach(i => {
								useStationAddress = useStationAddress ? useStationAddress + ',' + i.stationName :
									i.stationName
							})
							this.ticketsItem = {
								...this.ticketsItem,
								useStationAddress
							}
						}
					}
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	@import "../../../commin/commin.less";

	page {
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
	}

	.cardListBox {
		width: 100%;
		min-height: 100vh;
		background: #f5f7fa;
		padding-top: 2rpx;
		box-sizing: border-box;
	}

	.tabNav {
		width: 100%;
		height: 90rpx;
		background: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;

		.tabItem {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #909399;
		}
	}

	.ticketList {
		width: 94%;
		margin: 0rpx auto;

		.ticketItem {
			width: 100%;
			height: 246rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			background-size: 108% 120%;
			background-repeat: no-repeat;
			background-position: center;
			margin: 20rpx auto;

			.left {
				width: 230rpx;
				height: 246rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					font-size: 34rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				>view:nth-of-type(2) {
					margin: 10rpx auto;
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				>view:nth-of-type(3) {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				padding: 32rpx;
				box-sizing: border-box;

				>view:nth-of-type(1) {
					width: 100%;
					font-size: 34rpx;
					font-weight: 400;
					color: #303133;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin: 20rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #606266;
				}

				>view:nth-of-type(3) {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					font-size: 24rpx;
					font-weight: 400;
					color: #909399;

					>view {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;

						>view:nth-of-type(1) {
							width: 24rpx;
							height: 24rpx;
							border-radius: 50%;
							border: 1rpx solid #909399;
							color: #909399;
							font-size: 20rpx;
							text-align: center;
							line-height: 24rpx;
						}

						>view:nth-of-type(2) {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.details {
		width: 94%;
		// height: 720rpx;
		margin: 20rpx auto;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		padding: 8rpx 32rpx 40rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		>view {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			margin-top: 32rpx;

			>view:nth-of-type(1) {
				width: 150rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #606266;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				>view {
					margin-left: 10rpx;
				}
			}

			>view:nth-of-type(2) {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #303133;
			}

		}

		>view:nth-of-type(4) {
			>view:nth-of-type(2) {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #303133;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}
</style>